<template>
  <div class="app-container">
    <!-- 搜索和添加区域 -->
    <el-row class="mb-4">
      <el-col :span="8">
        <el-input v-model="searchKeyword" placeholder="请输入关键字搜索" clearable @clear="handleSearch"
          @keyup.enter="handleSearch">
          <template #append>
            <el-button icon="search" @click="handleSearch" />
          </template>
        </el-input>
      </el-col>
      <el-col :span="16" class="text-right">
        <el-button type="primary" icon="plus" @click="handleAdd">
          添加问题
        </el-button>
      </el-col>
    </el-row>

    <!-- 问题列表 -->
    <el-table v-loading="loading" :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="title" label="问题标题" min-width="200" />
      <el-table-column prop="category" label="分类" width="120" />
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="scope">
          <el-button type="primary" size="small" icon="edit" @click="handleEdit(scope.row)" />
          <el-button type="danger" size="small" icon="delete" @click="handleDelete(scope.row)" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination class="mt-4" background layout="prev, pager, next, sizes, total" :total="total" :page-size="pageSize"
      :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange"
      @current-change="handlePageChange" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
// import { getProblemList, deleteProblem } from "@/api/problem";

const router = useRouter();

// 数据状态
const tableData = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const searchKeyword = ref("");
const loading = ref(false);

// 获取问题列表
const fetchProblemList = async () => {
  // try {
  //   loading.value = true;
  //   const params = {
  //     page: currentPage.value,
  //     pageSize: pageSize.value,
  //     keyword: searchKeyword.value
  //   };
  //   const res = await getProblemList(params);
  //   tableData.value = res.data.list;
  //   total.value = res.data.total;
  // } catch (error) {
  //   console.error("获取问题列表失败:", error);
  //   ElMessage.error("获取数据失败");
  // } finally {
  //   loading.value = false;
  // }
};

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1;
  fetchProblemList();
};

// 添加问题
const handleAdd = () => {
  router.push({ name: "qstn_qstn_add" });
};

// 编辑问题
const handleEdit = row => {
  router.push(`/problem/edit/${row.id}`);
};

// 删除问题
const handleDelete = row => {
  // ElMessageBox.confirm(`确定删除问题 "${row.title}"?`, "警告", {
  //   confirmButtonText: "确定",
  //   cancelButtonText: "取消",
  //   type: "warning"
  // })
  //   .then(async () => {
  //     try {
  //       await deleteProblem(row.id);
  //       ElMessage.success("删除成功");
  //       fetchProblemList();
  //     } catch (error) {
  //       console.error("删除失败:", error);
  //       ElMessage.error("删除失败");
  //     }
  //   })
  //   .catch(() => { });
};

// 分页处理
const handlePageChange = page => {
  currentPage.value = page;
  fetchProblemList();
};

// 每页数量改变
const handleSizeChange = size => {
  pageSize.value = size;
  currentPage.value = 1;
  fetchProblemList();
};

// 初始化加载数据
onMounted(() => {
  fetchProblemList();
});
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.text-right {
  text-align: right;
}

.mb-4 {
  margin-bottom: 16px;
}

.mt-4 {
  margin-top: 16px;
}
</style>
